<template>
  <div class="grid-members-container">
    <div class="page-header">
      <h2>网格员管理</h2>
      <p>管理系统中的网格员信息</p>
    </div>
    
    <el-card>
      <template #header>
        <div style="display: flex; align-items: center; justify-content: space-between;">
          <span>网格员列表</span>
          <el-button type="primary" @click="refreshData">
            刷新
          </el-button>
        </div>
      </template>
      
      <div class="table-container">
        <el-table :data="gridMembers" style="width: 100%">
          <el-table-column prop="gmId" label="ID" width="80" />
          <el-table-column prop="gmCode" label="编码" width="120" />
          <el-table-column prop="gmName" label="姓名" width="120" />
          <el-table-column prop="gmPhone" label="电话" width="150" />
          <el-table-column prop="provinceId" label="省份" width="100" />
          <el-table-column prop="cityId" label="城市" width="100" />
          <el-table-column label="状态" width="100">
            <template #default="scope">
              <el-tag type="success">
                在线
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template #default="scope">
              <el-button size="small" @click="handleView(scope.row)">
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'

export default {
  name: 'AdminGridMembers',
  setup() {
    const store = useStore()
    const gridMembers = ref([])
    
    const refreshData = async () => {
      try {
        const data = await store.dispatch('data/getGridMembers')
        gridMembers.value = data
      } catch (error) {
        console.error('Failed to load grid members:', error)
      }
    }
    
    const handleView = (row) => {
      // TODO: 实现查看逻辑
      console.log('View grid member:', row)
    }
    
    onMounted(() => {
      refreshData()
    })
    
    return {
      gridMembers,
      refreshData,
      handleView
    }
  }
}
</script>

<style lang="scss" scoped>
.grid-members-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
  
  h2 {
    margin: 0 0 8px 0;
    color: #333;
  }
  
  p {
    margin: 0;
    color: #666;
  }
}

.table-container {
  margin-top: 20px;
}
</style> 